<template>
  <div class="policy-page w">
        <el-card class="box-card" shadow="hover">
          <template #header>
            <el-page-header @back="router.back()">
              <template #title>
                <el-text size="large" tag="b">Policies</el-text>
              </template>
              <template #content>
                <el-text size="large" type="primary" tag="b">Shipping Policy</el-text>
              </template>
            </el-page-header>
          </template>
          
          <div class="policy-content">
            <div class="section-content">
              <el-tabs type="border-card">
                <el-tab-pane>
                  <template #label>
                    <el-icon><Van /></el-icon>
                    <span>Domestic</span>
                  </template>
                  <el-table :data="domesticShipping" border style="width: 100%">
                    <el-table-column prop="method" label="Shipping Method" />
                    <el-table-column prop="time" label="Delivery Time">
                      <template #default="{ row }">
                        <el-tag :type="row.tagType">{{ row.time }}</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="cost" label="Cost Range" align="right" />
                  </el-table>
                </el-tab-pane>
                <el-tab-pane>
                  <template #label>
                    <el-icon><Ship /></el-icon>
                    <span>International</span>
                  </template>
                  <el-alert
                    type="warning"
                    :closable="false"
                    show-icon
                    title="Import Duties & Taxes"
                    description="International orders may be subject to import duties and taxes. Please check your local customs regulations before placing an order."
                    class="mb-4"
                  />
                  <el-link type="primary" @click="router.push('/policies/international-orders')">
                    View International Shipping Details
                    <el-icon class="el-icon--right"><ArrowRight /></el-icon>
                  </el-link>
                </el-tab-pane>
              </el-tabs>
            </div>

            <h2>1. Processing Time</h2>
            <div class="section-content">
              <el-card shadow="never" class="info-card">
                <template #header>
                  <div class="card-header">
                    <el-icon><Timer /></el-icon>
                    <h3>Order Processing</h3>
                  </div>
                </template>
                <div class="policy-text">
                  Orders are typically processed within 1-2 business days. During peak seasons or holidays, processing times may be extended.
                </div>
                <el-progress :percentage="50" :format="() => '1-2 business days'" status="success" class="mt-3" />
              </el-card>
            </div>

            <h2>2. Tracking & Updates</h2>
            <div class="section-content">
              <el-timeline>
                <el-timeline-item
                  timestamp="Step 1"
                  type="primary"
                >
                  <h4>Order Confirmation</h4>
                  <p>Immediate email confirmation after order placement</p>
                </el-timeline-item>
                <el-timeline-item
                  timestamp="Step 2"
                  type="success"
                >
                  <h4>Processing Started</h4>
                  <p>Email notification when your order begins processing</p>
                </el-timeline-item>
                <el-timeline-item
                  timestamp="Step 3"
                  type="warning"
                >
                  <h4>Shipping Confirmation</h4>
                  <p>Email with tracking number when order ships</p>
                </el-timeline-item>
                <el-timeline-item
                  timestamp="Step 4"
                  type="info"
                >
                  <h4>Delivery Updates</h4>
                  <p>Regular updates through tracking system</p>
                </el-timeline-item>
              </el-timeline>
            </div>

            <h2>3. Special Considerations</h2>
            <div class="section-content">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-card shadow="hover">
                    <template #header>
                      <div class="card-header">
                        <el-icon><Calendar /></el-icon>
                        <h3>Holiday Schedule</h3>
                      </div>
                    </template>
                    <p class="policy-text">Extended processing times during major holidays</p>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card shadow="hover">
                    <template #header>
                      <div class="card-header">
                        <el-icon><Location /></el-icon>
                        <h3>Remote Areas</h3>
                      </div>
                    </template>
                    <p class="policy-text">Additional delivery time for remote locations</p>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card shadow="hover">
                    <template #header>
                      <div class="card-header">
                        <el-icon><Box /></el-icon>
                        <h3>Large Items</h3>
                      </div>
                    </template>
                    <p class="policy-text">Special handling for oversized packages</p>
                  </el-card>
                </el-col>
              </el-row>
            </div>

            <el-divider>Need Assistance?</el-divider>

            <div class="contact-section">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-button type="primary" @click="router.push('/contact')" class="contact-button">
                    <el-icon><Message /></el-icon>
                    Contact Support
                  </el-button>
                </el-col>
                <el-col :span="12">
                  <el-button type="success" @click="router.push('/policies/shipping-countries')" class="contact-button">
                    <el-icon><Place /></el-icon>
                    Shipping Countries
                  </el-button>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { 
  Van, Ship, Timer, Calendar, Location, Box, 
  Message, Place, ArrowRight 
} from '@element-plus/icons-vue'

const router = useRouter()

const domesticShipping = [
  {
    method: 'Standard Ground',
    time: '5-7 business days',
    cost: '$5.99 - $12.99',
    tagType: ''
  },
  {
    method: 'Express',
    time: '2-3 business days',
    cost: '$15.99 - $25.99',
    tagType: 'warning'
  },
  {
    method: 'Next Day Air',
    time: '1 business day',
    cost: '$29.99 - $49.99',
    tagType: 'danger'
  }
]
</script>

<style scoped>
.policy-page {
  padding: 20px 0;
  background-color: var(--el-bg-color-page);
}

.policy-content {
  padding: 20px 0;
}

.section-content {
  margin: 20px 0 40px;
}

h2 {
  color: var(--el-text-color-primary);
  margin-top: 30px;
}

h3 {
  margin: 0;
  font-size: 16px;
  color: var(--el-text-color-primary);
}

.policy-text {
  line-height: 1.8;
  margin: 10px 0;
  color: var(--el-text-color-regular);
}

.info-card {
  border: 1px solid var(--el-border-color-light);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-header .el-icon {
  color: var(--el-color-primary);
}

.mt-3 {
  margin-top: 12px;
}

.mb-4 {
  margin-bottom: 16px;
}

.contact-section {
  text-align: center;
  margin-top: 40px;
}

.contact-button {
  width: 100%;
  margin-top: 20px;
}

:deep(.el-page-header__title) {
  margin-right: 20px;
}

:deep(.el-timeline-item__content h4) {
  margin: 0;
  font-size: 16px;
  color: var(--el-text-color-primary);
}

:deep(.el-timeline-item__content p) {
  margin: 8px 0 0;
  color: var(--el-text-color-regular);
}

:deep(.el-tabs__item) {
  display: flex;
  align-items: center;
  gap: 8px;
}

:deep(.el-tabs__item .el-icon) {
  margin: 0;
}
</style> 